<template>
  <div class="">
    App...
    <button ref="btn">按钮</button>
    <input type="text" ref="input" />
    <!-- 使用组件 -->
    <Child ref="child"></Child>
  </div>
</template>

<script>
// 引入组件
import Child from "./Child.vue";
/**
 * ref语法
 * 功能:获取真实dom元素 组件实例对象
 * 操作:给元素绑定ref属性 通过 this.$ref.xxx获取真实DOM元素
 */
export default {
  name: "App",
  created() {
    console.log("created", this.$refs.btn);
  },
  beforeMount() {
    console.log("beforeMount", this.$refs.btn);
  },
  mounted() {
    console.log("mounted", this.$refs.btn);
    console.log("mounted", this.$refs.input);
    console.log("mounted", this.$refs.child);
  },
//   定义组件
  components: {
    Child,
  },
};
</script>

<style scoped lang="less">
</style>
